import './style.css'

// 示例数据数组
const examplesData = [
  {
    name: 'aniplex动画+原神角色展示',
    image: '/src/img/_templatepics/template01.png',
    description:
      '一个精美的原神角色展示页面，包含角色卡片、动画效果和详细信息展示。使用了CSS动画和响应式设计。',
    link: '/html/template-01/index.html',
    category: '游戏主题',
    features: ['CSS动画', 'flex布局', '响应式设计', '角色展示']
  },
  {
    name: '难念的经-歌词滚动效果',
    image: '/src/img/_templatepics/template02.png',
    description:
      '一个带有歌词同步显示的音乐播放器页面，支持音频播放控制和实时歌词滚动效果。',
    link: '/html/template-02/index.html',
    category: '音乐应用',
    features: ['音频播放', '歌词同步', '动态效果']
  },
  {
    name: '瑞幸小程序点单+js封装类+贝塞尔动画',
    image: '/src/img/_templatepics/template03.png',
    description:
      '模拟咖啡店点餐系统的界面，包含商品分类、购物车功能和订单结算。界面设计简洁现代。',
    link: '/html/template-03/index.html',
    category: '瑞幸点单',
    features: ['移动端', 'js封装类', '贝塞尔曲线动画']
  },
  {
    name: 'Tailwindcss Github 页面',
    image: '/src/img/_templatepics/template04.png',
    description:
      '一个高度模仿GitHub Tailwind CSS界面的页面，包含导航栏、仓库信息、文件列表等元素，使用TailwindCSS构建。',
    link: '/html/template-04/index.html',
    category: 'Github',
    features: ['TailwindCSS', '响应式布局', 'GitHub界面']
  },
  {
    name: 'Swiper滑动页面+动画效果',
    image: '/src/img/_templatepics/template05.png',
    description:
      '一个使用Swiper实现的H5滑动页面，包含丰富的CSS3动画效果，适合移动端展示。',
    link: '/html/template-05/index.html',
    category: 'Swiper',
    features: ['Swiper滑动', 'CSS3动画', '移动端适配']
  }
]

// 渲染示例卡片
function renderExampleCards() {
  const container = document.getElementById('examples-container')

  if (!container) {
    console.error('找不到示例容器元素')
    return
  }

  container.innerHTML = examplesData
    .map(
      (example) => `
    <div class="example-card bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 flex flex-col h-full">
      <!-- 示例图片 -->
      <div class="image-container relative h-48 overflow-hidden">
        <img
          src="${example.image}"
          alt="${example.name}"
          class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
          onerror="this.src='/src/img/template-03/g1.png'"
        />
        <div class="absolute top-4 left-4">
          <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
            ${example.category}
          </span>
        </div>
      </div>

      <!-- 示例信息 -->
      <div class="p-6 flex flex-col flex-grow">
        <h3 class="text-xl font-bold text-gray-800 mb-2">${example.name}</h3>
        <p class="text-gray-600 mb-4 leading-relaxed flex-grow">${example.description}</p>

        <!-- 功能标签 -->
        <div class="flex flex-wrap gap-2 mb-4">
          ${example.features
            .map(
              (feature) => `
            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">
              ${feature}
            </span>
          `
            )
            .join('')}
        </div>

        <!-- 查看按钮 -->
        <a
          href="${example.link}"
          target="_blank"
          class="inline-flex items-center justify-center w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 mt-auto"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
          </svg>
          查看示例
        </a>
      </div>
    </div>
  `
    )
    .join('')
}

// 页面加载完成后渲染示例卡片
document.addEventListener('DOMContentLoaded', renderExampleCards)
